// 1. 籍贯 饼形图
function setPie() {
    let myChart = echarts.init(document.querySelector('.panel.pie'))

    let option = {
        //不需要图例组件
        //不需要工具栏组件
        //标题
        title: {
            text: '籍贯 Hometown',
            textStyle: {
                color: '#6d767e'
            }
        },
        //(悬停)提示框组件
        tooltip: {
            formatter: '{a} <br> {b} <b>{c}</b>人 {d}%',
        },
        series: [{
            name: '各地人员分布',
            type: 'pie',
            // 内圆半径,外圆半径
            radius: ['20%', '65%'],

            //圆心位置,默认中心
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 4
            },
            data: [{
                    value: 40,
                    name: '湖北省'
                },
                {
                    value: 38,
                    name: '湖南省'
                },
                {
                    value: 32,
                    name: '河北省'
                },
                {
                    value: 30,
                    name: '河南省'
                },
                {
                    value: 28,
                    name: '广东省'
                },
                {
                    value: 26,
                    name: '广西省'
                },
                {
                    value: 22,
                    name: '海南省'
                },
                {
                    value: 18,
                    name: '山东省'
                }
            ]
        }]
    };

    myChart.setOption(option)
    console.log(myChart)
}
setPie()


// 2. 地图 (首先要导入echarts/china.js)
function setMap() {
    let myChart = echarts.init(document.querySelector('.map'))



    // 位置 + 经纬度
    var chinaGeoCoordMap = {
        "顺义校区": [
            116.4551,
            40.2539
        ],
        "海拉尔区": [
            119.736279,
            49.212189
        ],
        "市中区": [
            116.997777,
            36.651474
        ],
    };
    var chinaDatas = [
        [{
            "name": "海拉尔区",
            "value": 0
        }],
        [{
            "name": "市中区",
            "value": 3
        }],
    ];

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [
        ['顺义校区', chinaDatas]
    ].forEach(function (item, i) {
        series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.2 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 12
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 4 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [5, 0],
                        color: '#9eca7f', // 目标点文字颜色
                        formatter: '{b}',
                        textStyle: {
                            color: "#9eca7f"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60", // 目标点鼠标移入的颜色
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function (params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     var res = "";
        //     var name = params.name;
        //     var value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        // backgroundColor: "#013954",
        // visualMap: { //图例值控制
        //   min: 0,
        //   max: 1,
        //   calculable: true,
        //   show: false,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    // color: 'rgba(51, 69, 89, .5)', //地图背景色
                    // color: '#5a6fc0', //地图背景色
                    // borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    myChart.setOption(option);
}
setMap()

// 3. 成绩 柱状图
function setBar() {
    let myChart = echarts.init(document.querySelector('.barChart'))


    let option = {


        tooltip: {
            trigger: 'axis',
            axisPointer: {
                //X轴设置了阴影,则交叉X轴会不显示
                type: 'cross'

            }
        },
        grid: {
            top: 30,
            bottom: 30,
            right: '7%',
            left: '7%'
        },
        toolbox: {
            feature: {

            }
        },
        legend: {
            // data: ['平均分', '低于60分人数', '60到80分之间','高于80分人数']
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: 0
            },
            //鼠标移入X轴,出现阴影
            axisPointer: {
                type: 'shadow'

            },

            data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组', '8组']
        }],
        yAxis: [{
                type: 'value',

                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value}分 '
                }
            },
            {
                type: 'value',
                max: 10,
                min: 0,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        series: [{
                name: '平均分',
                type: 'bar',
                barWidth: '15',
                data: [
                    70, 80, 55, 66, 77, 54, 91, 44,
                ]
            },
            {
                name: '低于60分人数',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: [
                    1, 3, 5, 3, 3, 4, 1, 3
                ]
            },
            {
                name: '60到80分之间',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: [4, 2, 1, 3, 2, 2, 1, 3, ]
            },
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: [2, 2, 1, 1, 2, 1, 5, 1]
            }
        ]
    };
    myChart.setOption(option)
}
setBar()

// 4薪资 折线图
function setLine() {
    let myChart = echarts.init(document.querySelector('.line'))
    let
        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                text: '薪资 Salary',
                textStyle: {
                    color: '#6d767e',
                }
            },
            legend: {
                top: 20
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['亚飛', '亚熙', '亚美', '亚梦', '亚龍', '亚琛', '亚秋', '亚玲']
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '50%']
            },
            dataZoom: [
                // {
                //       type: 'inside',
                //       start: 0,
                //       end: 10
                //   },
                {
                    //默认值:slider
                    start: 0,
                    end: 20
                }
            ],
            series: [{
                name: '期望薪资',
                type: 'line',
                symbol: 'none',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                smooth: 'true',
                data: [15000, 12000, 10000, 13000, 8000, 9000, 10000, 15000]
            }, {
                name: '实际薪资',
                type: 'line',
                symbol: 'none',
                smooth: '1',
                itemStyle: {
                    color: '#5c7bd9'
                },

                data: [18000, 12000, 15000, 15000, 9000, 8000, 7000, 12000]
            }, ]
        };
    myChart.setOption(option)
}
setLine()